<template>
	<view class="music-head">
		<!-- 图标区 -->
		<view class="music-head-icon">
			<view class="music-head-icon-content" v-if="icon" :style="{color:titleColor}">
				<!-- 返回上一页图标 -->
				<view class="iconfont icon-zuojiantou" @tap="handleToBack"></view> 
				<view class="line">|</view>
				<!-- 返回首页图标 -->
				<view class="iconfont icon-shouye" @tap="handleToHome"></view>
			</view>
		</view>
		<!-- 标题区 -->
		<text class="music-head-title" :style="{color:titleColor}">{{title}}</text>
		<!-- 添加一个空格 完成左中右flex布局 -->
		<view class="space"></view>
	</view>
</template>

<script>
	export default {
		name:"musichead",
		props:['title','icon','titleColor'],
		data() {
			return {
				
			};
		},
		methods:{
			// 返回上一页
			handleToBack(){
				uni.navigateBack()
			},
			// 返回首页
			handleToHome(){
				uni.navigateTo({
					url:'/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.music-head{
		display: flex;
		width: 100%;
		height: 150rpx;
		font-size: 32rpx;
		// 图标区样式
		.music-head-icon{
			flex: 1;
			margin-top: 50rpx;
			margin-left: 20rpx;
			.music-head-icon-content{
				display: flex;
				width: 180rpx;
				height: 60rpx;
				border-radius: 40rpx;
				background-color: rgba(0,0,0,0.2);
				.iconfont,.line{
					flex:4;
					text-align: center;
					line-height: 60rpx;
				}
				.line{
					flex: 1;
					line-height: 57rpx;
					color: rgba(255, 255, 255, 0.4);
				}
			}
		}
		// 标题区样式
		.music-head-title{
			flex: 1;
			text-align: center;
			line-height: 160rpx;
		}
		// 小空格
		.space{
			flex: 1;
		}
	}
</style>
